<template>
  <div class="fit row">
    <div style="width: calc(100% - 26px)">
      <PropsArea v-if="currentLeftTab === 'props'" :name="currentNode.type" :dataScope="currentNode.props"></PropsArea>
      <EventArea v-if="currentLeftTab === 'events'" :name="currentNode.type" :dataScope="currentNode.props"></EventArea>
      <StyleArea v-if="currentLeftTab === 'style'" :name="currentNode.type" :dataScope="currentNode.props"></StyleArea>
    </div>
    <div class="slider-tab" style="width: calc(26px)">
      <div class="slider-tab-item" :class="{active: currentLeftTab === 'props'}" @click="currentLeftTab = 'props'">属性</div>
      <div class="slider-tab-item" :class="{active: currentLeftTab === 'events'}" @click="currentLeftTab = 'events'">事件</div>
      <div class="slider-tab-item" :class="{active: currentLeftTab === 'style'}" @click="currentLeftTab = 'style'">样式</div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue"
import PropsArea from '../PropsArea/index.vue'
import EventArea from '../EventArea/index.vue'
import StyleArea from '../StyleArea/index.vue'
const props = defineProps({
  currentNode: Object
})
const currentLeftTab = ref('props')
</script>

<style scoped>
.slider-tab {
  background-color: #e5e5e5;
}
.slider-tab .slider-tab-item{
  width: 100%;
  font-size: 12px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding-top: 10px;
  padding-bottom: 5px;
  cursor: pointer;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  letter-spacing: 10px;
  color: #666;
}
.slider-tab-item.active {
  color: #000;
  background-color: white;
}
</style>
